import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (app) {
    // 定义全局指令
    app.directive('imgLazy', {
      // 绑定元素的父组件被挂载时调用
      mounted (el, binding) {
        // el: 绑定谁身上就指代哪个dom元素
        // binding.value: 指令等于号后面绑定的表达式的值 imgurl
        // console.log(el, binding.value)
        useIntersectionObserver(el,
          ([{ isIntersecting }], observerElement) => {
            // console.log(isIntersecting, observerElement)
            if (isIntersecting) {
              el.src = binding.value
            }
          })
      }
    })
  }
}
